<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>360商城</title>
    <link rel="stylesheet" href="../stylesheets/css/home.css" />
    <link
      rel="stylesheet"
      href="//at.alicdn.com/t/font_2990434_aaxqpd9w7e8.css"
    />
    <link rel="stylesheet" href="./stylesheets/swiper-bundle.min.css" />
    <!-- <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> -->

    <script type="module">
      import Swiper from "./javascripts/library/swiper-bundle.esm.browser.min.js";
      const swiper = new Swiper(".swiper", {
        autoplay: {
          disableOnInteraction: false, //点击任意功能后继续自动播放，默认true ，需要改成false才能继续自动播放
        }, //可选选项，自动滑动
        loop: true, //循环
        effect: "fade",

        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    </script>
  </head>
  <body>
    <div class="top-bar">
      <div class="top-box">
        <div class="top-box-left">
          <a href="" class="text-link">帮助中心</a>
          <a href="" class="text-link">收藏</a>
          <a href="" class="text-link">360官网</a>
          <a href="" class="text-link">360智慧生活</a>
        </div>
        <div class="top-box-right">
          <div class="login-box">
            <div class="user-login text-link">登录</div>
            <div class="user-reg text-link">注册</div>
          </div>
          <div class="cart">
            <a href="" class="text-link"
              ><i class="iconfont icon-shop-cart-"></i
            ></a>
            <div class="cart-detail-box">
              <a href="" class="text-link"
                ><i class="iconfont icon-shop-cart-"></i
              ></a>
              <div class="cart-box-text">
                您的购物车还没有商品，赶紧去选购吧！
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="index-header">
      <div class="header clearfix">
        <div class="header-box clearfix">
          <div class="header-left">
            <a href="">
              <i class="logo"></i>
            </a>
            <div class="news">
              <a href="">新品推荐</a>
            </div>
            <div class="hot">
              <a href="">热卖榜单</a>
            </div>
          </div>
          <div class="header-right">
            <div class="search">
              <div class="search-ipt">
                <input type="text" />
              </div>
              <i class="seacrch-icon iconfont icon-search"></i>
            </div>
            <div class="search-list">
              <a href="">记录仪</a>
              <a href="">摄像机</a>
              <a href="">路由器</a>
              <a href="">耳机</a>
              <a href="">扫地机</a>
              <a href="">智能手表</a>
            </div>
          </div>
        </div>
      </div>

      <div class="banner clearfix">
        <div class="banner-box">
          <div class="swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <a
                  href=""
                  style="background-image: url('../images/slider1.webp')"
                ></a>
              </div>
              <div class="swiper-slide">
                <a
                  href=""
                  style="background-image: url('../images/slider2.webp')"
                ></a>
              </div>
              <div class="swiper-slide">
                <a
                  href=""
                  style="background-image: url('../images/slider3.webp')"
                ></a>
              </div>
              <div class="swiper-slide">
                <a
                  href=""
                  style="background-image: url('../images/slider4.webp')"
                ></a>
              </div>
              <div class="swiper-slide">
                <a
                  href=""
                  style="background-image: url('../images/slider5.webp')"
                ></a>
              </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <!-- 如果需要滚动条
          <div class="swiper-scrollbar"></div> -->
          </div>
        </div>
        <div class="category-box">
          <div class="category-item item-all">
            <a href="">
              <i class="iconfont icon-ziyuanxhdpi"></i>
              全部分类
            </a>
          </div>
          <ul class="category-list">
            <li class="list-item">
              <a href="">家庭安防</a>
              <div class="right-wrapper">
                <div class="category-left">
                  <div class="category-level-box">
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item1.webp"
                          alt=""
                          srcset=""
                        />
                        摄像机
                      </a>
                    </div>
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item2.webp"
                          alt=""
                          srcset=""
                        />
                        门铃
                      </a>
                    </div>
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item3.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item3.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item3.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item3.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="list-item">
              <a href="">安全路由</a>
              <div class="right-wrapper">
                <div class="category-left">
                  <div class="category-level-box">
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item1.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item2.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item3.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="list-item">
              <a href="">智能手表</a>
              <div class="right-wrapper">
                <div class="category-left">
                  <div class="category-level-box">
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item1.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item2.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item3.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="list-item">
              <a href="">汽车用品</a>
              <div class="right-wrapper">
                <div class="category-left">
                  <div class="category-level-box">
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item1.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item2.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item3.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="list-item">
              <a href="">扫地机器人</a>
              <div class="right-wrapper">
                <div class="category-left">
                  <div class="category-level-box">
                    <div class="level-box roobt">
                      <a href="">主机</a>
                      <div class="level-list">
                        <a href="">
                          <img
                            src="../images/banner-list-item4.webp"
                            alt=""
                            srcset=""
                          />
                          X95礼盒版
                        </a>
                        <a href="">
                          <img
                            src="../images/banner-list-item4.webp"
                            alt=""
                            srcset=""
                          />
                          X95礼盒版
                        </a>
                        <a href="">
                          <img
                            src="../images/banner-list-item4.webp"
                            alt=""
                            srcset=""
                          />
                          X95礼盒版
                        </a>
                        <a href="">
                          <img
                            src="../images/banner-list-item4.webp"
                            alt=""
                            srcset=""
                          />
                          X95礼盒版
                        </a>
                        <a href="">
                          <img
                            src="../images/banner-list-item4.webp"
                            alt=""
                            srcset=""
                          />
                          X95礼盒版
                        </a>
                        <a href="">
                          <img
                            src="../images/banner-list-item4.webp"
                            alt=""
                            srcset=""
                          />
                          X95礼盒版
                        </a>
                        <a href="">
                          <img
                            src="../images/banner-list-item4.webp"
                            alt=""
                            srcset=""
                          />
                          X95礼盒版
                        </a>
                      </div>
                    </div>
                    <div class="level-box roobt">
                      <a href=""> 配件 </a>
                      <div class="level-list">
                        <a href="">
                          <img
                            src="../images/banner-list-item4.webp"
                            alt=""
                            srcset=""
                          />
                          **配件
                        </a>
                        <a href="">
                          <img
                            src="../images/banner-list-item4.webp"
                            alt=""
                            srcset=""
                          />
                          **配件
                        </a>
                        <a href="">
                          <img
                            src="../images/banner-list-item4.webp"
                            alt=""
                            srcset=""
                          />
                          **配件
                        </a>
                        <a href="">
                          <img
                            src="../images/banner-list-item4.webp"
                            alt=""
                            srcset=""
                          />
                          **配件
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="list-item">
              <a href="">影音生活</a>
              <div class="right-wrapper">
                <div class="category-left">
                  <div class="category-level-box">
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item1.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item2.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item3.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="list-item">
              <a href="">生态产品</a>
              <div class="right-wrapper">
                <div class="category-left">
                  <div class="category-level-box">
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item1.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item2.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                    <div class="level-box">
                      <a href="">
                        <img
                          src="../images/banner-list-item3.webp"
                          alt=""
                          srcset=""
                        />
                        平衡车
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="body-main">
      <div class="index-floor">
        <div class="floor">
          <div class="floor-title">
            <span class="title"> 热门活动 </span>
          </div>
          <div class="floor-body clearfix">
            <div class="floor-box">
              <a href="" class="floor-box-img hover-img">
                <img src="../images/hot-floor1.webp" alt="" />
              </a>
              <a href="" class="floor-box-img hover-img">
                <img src="../images/hot-floor2.webp" alt="" />
              </a>
              <a href="" class="floor-box-img hover-img">
                <img src="../images/hot-floor3.webp" alt="" />
              </a>
              <a href="" class="floor-box-img hover-img">
                <img src="../images/hot-floor4.webp" alt="" />
              </a>
            </div>
          </div>
        </div>
        <div class="floor">
          <a href="" class="floor-body clearfix"></a>
        </div>

        <!-- 1 -->
        <div class="floor">
          <div class="floor-title">
            <span class="title">家庭安防</span>
            <a href="">全部>></a>
          </div>
          <div class="floor-body">
            <div class="floor-box clearfix">
              <a
                class="head-img-item hover-img"
                style="background-image: url(../images/1.webp)"
              ></a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange">新款</div>
                <img src="../images/t01480f118d233044a6.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
            </div>
          </div>
        </div>
        <div class="floor">
          <a href="" class="floor-body clearfix"></a>
        </div>

        <!-- 2 -->
        <div class="floor">
          <div class="floor-title">
            <span class="title">安全路由</span>
            <a href="">全部>></a>
          </div>
          <div class="floor-body">
            <div class="floor-box clearfix">
              <a
                class="head-img-item hover-img"
                style="background-image: url(../images/1.webp)"
              ></a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
            </div>
          </div>
        </div>
        <div class="floor">
          <a href="" class="floor-body clearfix"></a>
        </div>

        <!-- 3 -->
        <div class="floor">
          <div class="floor-title">
            <span class="title">行车安全</span>
            <a href="">全部>></a>
          </div>
          <div class="floor-body">
            <div class="floor-box clearfix">
              <a
                class="head-img-item hover-img"
                style="background-image: url(../images/1.webp)"
              ></a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
            </div>
          </div>
        </div>
        <div class="floor">
          <a href="" class="floor-body clearfix"></a>
        </div>

        <!-- 4 -->
        <div class="floor">
          <div class="floor-title">
            <span class="title">扫地机器人</span>
            <a href="">全部>></a>
          </div>
          <div class="floor-body">
            <div class="floor-box clearfix">
              <a
                class="head-img-item hover-img"
                style="background-image: url(../images/1.webp)"
              ></a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
            </div>
          </div>
        </div>
        <div class="floor">
          <a href="" class="floor-body clearfix"></a>
        </div>

        <!-- 5 -->
        <div class="floor">
          <div class="floor-title">
            <span class="title">智能守护</span>
            <a href="">全部>></a>
          </div>
          <div class="floor-body">
            <div class="floor-box clearfix">
              <a
                class="head-img-item hover-img"
                style="background-image: url(../images/1.webp)"
              ></a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
            </div>
          </div>
        </div>
        <div class="floor">
          <a href="" class="floor-body clearfix"></a>
        </div>

        <!-- 6 -->
        <div class="floor">
          <div class="floor-title">
            <span class="title">生态互联</span>
            <a href="">全部>></a>
          </div>
          <div class="floor-body">
            <div class="floor-box clearfix">
              <a
                class="head-img-item hover-img"
                style="background-image: url(../images/1.webp)"
              ></a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
              <a href="" class="product-item hover-img">
                <div class="top-label label-orange"></div>
                <img src="../images/1-1.webp" alt="" />
                <p class="name">360可视门铃5Pro AR1C</p>
                <p class="desc">2K超清画质 166°超广视角</p>
                <p class="price">
                  <span class="cur-price">¥429</span>
                </p>
              </a>
            </div>
          </div>
        </div>
        <div class="floor">
          <a href="" class="floor-body clearfix"></a>
        </div>

        <!-- more -->
        <div class="floor">
          <div class="floor-title">
            <span class="title">更多商品</span>
          </div>
          <div class="floor-body">
            <div class="floor-box">
              <div class="feed-list clearfix">
                <a
                  href=""
                  class="feed-item hover-img"
                  title="360智能摄像机小水滴5C 2K高清版AC1P"
                >
                  <div class="item-img">
                    <img src="../images/t01192edc41a78ee2ac.webp" alt="" />
                  </div>
                  <div class="name">360智能摄像机小水滴5C 2K高清版AC1P</div>
                  <div class="price">
                    <span class="cur-price">¥149</span>
                  </div>
                  <div class="label-line">
                    <span class="label">直降</span>
                  </div>
                </a>
                <a
                  href=""
                  class="feed-item hover-img"
                  title="360智能摄像机小水滴5C 2K高清版AC1P"
                >
                  <div class="item-img">
                    <img src="../images/t01192edc41a78ee2ac.webp" alt="" />
                  </div>
                  <div class="name">360智能摄像机小水滴5C 2K高清版AC1P</div>
                  <div class="price">
                    <span class="cur-price">¥149</span>
                  </div>
                  <div class="label-line">
                    <span class="label">直降</span>
                  </div>
                </a>
                <a
                  href=""
                  class="feed-item hover-img"
                  title="360智能摄像机小水滴5C 2K高清版AC1P"
                >
                  <div class="item-img">
                    <img src="../images/t01192edc41a78ee2ac.webp" alt="" />
                  </div>
                  <div class="name">360智能摄像机小水滴5C 2K高清版AC1P</div>
                  <div class="price">
                    <span class="cur-price">¥149</span>
                  </div>
                  <div class="label-line">
                    <span class="label">直降</span>
                  </div>
                </a>
                <a
                  href=""
                  class="feed-item hover-img"
                  title="360智能摄像机小水滴5C 2K高清版AC1P"
                >
                  <div class="item-img">
                    <img src="../images/t01192edc41a78ee2ac.webp" alt="" />
                  </div>
                  <div class="name">360智能摄像机小水滴5C 2K高清版AC1P</div>
                  <div class="price">
                    <span class="cur-price">¥149</span>
                  </div>
                  <div class="label-line">
                    <span class="label">直降</span>
                  </div>
                </a>
                <a
                  href=""
                  class="feed-item hover-img"
                  title="360智能摄像机小水滴5C 2K高清版AC1P"
                >
                  <div class="item-img">
                    <img src="../images/t01192edc41a78ee2ac.webp" alt="" />
                  </div>
                  <div class="name">360智能摄像机小水滴5C 2K高清版AC1P</div>
                  <div class="price">
                    <span class="cur-price">¥149</span>
                  </div>
                  <div class="label-line">
                    <span class="label">直降</span>
                  </div>
                </a>
                <a
                  href=""
                  class="feed-item hover-img"
                  title="360智能摄像机小水滴5C 2K高清版AC1P"
                >
                  <div class="item-img">
                    <img src="../images/t01192edc41a78ee2ac.webp" alt="" />
                  </div>
                  <div class="name">360智能摄像机小水滴5C 2K高清版AC1P</div>
                  <div class="price">
                    <span class="cur-price">¥149</span>
                  </div>
                  <div class="label-line">
                    <span class="label">直降</span>
                  </div>
                </a>
                <a
                  href=""
                  class="feed-item hover-img"
                  title="360智能摄像机小水滴5C 2K高清版AC1P"
                >
                  <div class="item-img">
                    <img src="../images/t01192edc41a78ee2ac.webp" alt="" />
                  </div>
                  <div class="name">360智能摄像机小水滴5C 2K高清版AC1P</div>
                  <div class="price">
                    <span class="cur-price">¥149</span>
                  </div>
                  <div class="label-line">
                    <span class="label">直降</span>
                  </div>
                </a>
                <a
                  href=""
                  class="feed-item hover-img"
                  title="360智能摄像机小水滴5C 2K高清版AC1P"
                >
                  <div class="item-img">
                    <img src="../images/t01192edc41a78ee2ac.webp" alt="" />
                  </div>
                  <div class="name">360智能摄像机小水滴5C 2K高清版AC1P</div>
                  <div class="price">
                    <span class="cur-price">¥149</span>
                  </div>
                  <div class="label-line">
                    <span class="label">直降</span>
                  </div>
                </a>
                <a
                  href=""
                  class="feed-item hover-img"
                  title="360智能摄像机小水滴5C 2K高清版AC1P"
                >
                  <div class="item-img">
                    <img src="../images/t01192edc41a78ee2ac.webp" alt="" />
                  </div>
                  <div class="name">360智能摄像机小水滴5C 2K高清版AC1P</div>
                  <div class="price">
                    <span class="cur-price">¥149</span>
                  </div>
                  <div class="label-line">
                    <span class="label">直降</span>
                  </div>
                </a>
                <a
                  href=""
                  class="feed-item hover-img"
                  title="360智能摄像机小水滴5C 2K高清版AC1P"
                >
                  <div class="item-img">
                    <img src="../images/t01192edc41a78ee2ac.webp" alt="" />
                  </div>
                  <div class="name">360智能摄像机小水滴5C 2K高清版AC1P</div>
                  <div class="price">
                    <span class="cur-price">¥149</span>
                  </div>
                  <div class="label-line">
                    <span class="label">直降</span>
                  </div>
                </a>
                <a
                  href=""
                  class="feed-item hover-img"
                  title="360智能摄像机小水滴5C 2K高清版AC1P"
                >
                  <div class="item-img">
                    <img src="../images/t01192edc41a78ee2ac.webp" alt="" />
                  </div>
                  <div class="name">360智能摄像机小水滴5C 2K高清版AC1P</div>
                  <div class="price">
                    <span class="cur-price">¥149</span>
                  </div>
                  <div class="label-line">
                    <span class="label">直降</span>
                  </div>
                </a>
                <a
                  href=""
                  class="feed-item hover-img"
                  title="360智能摄像机小水滴5C 2K高清版AC1P"
                >
                  <div class="item-img">
                    <img src="../images/t01192edc41a78ee2ac.webp" alt="" />
                  </div>
                  <div class="name">360智能摄像机小水滴5C 2K高清版AC1P</div>
                  <div class="price">
                    <span class="cur-price">¥149</span>
                  </div>
                  <div class="label-line">
                    <span class="label">直降</span>
                  </div>
                </a>
                <a
                  href=""
                  class="feed-item hover-img"
                  title="360智能摄像机小水滴5C 2K高清版AC1P"
                >
                  <div class="item-img">
                    <img src="../images/t01192edc41a78ee2ac.webp" alt="" />
                  </div>
                  <div class="name">360智能摄像机小水滴5C 2K高清版AC1P</div>
                  <div class="price">
                    <span class="cur-price">¥149</span>
                  </div>
                  <div class="label-line">
                    <span class="label">直降</span>
                  </div>
                </a>
                <a
                  href=""
                  class="feed-item hover-img"
                  title="360智能摄像机小水滴5C 2K高清版AC1P"
                >
                  <div class="item-img">
                    <img src="../images/t01192edc41a78ee2ac.webp" alt="" />
                  </div>
                  <div class="name">360智能摄像机小水滴5C 2K高清版AC1P</div>
                  <div class="price">
                    <span class="cur-price">¥149</span>
                  </div>
                  <div class="label-line">
                    <span class="label">直降</span>
                  </div>
                </a>
                <a
                  href=""
                  class="feed-item hover-img"
                  title="360智能摄像机小水滴5C 2K高清版AC1P"
                >
                  <div class="item-img">
                    <img src="../images/t01192edc41a78ee2ac.webp" alt="" />
                  </div>
                  <div class="name">360智能摄像机小水滴5C 2K高清版AC1P</div>
                  <div class="price">
                    <span class="cur-price">¥149</span>
                  </div>
                  <div class="label-line">
                    <span class="label">直降</span>
                  </div>
                </a>
              </div>

              <div class="feed-append-box">
                <div class="feed-text-box">
                  <span class="feed-bottom-text">我已经陪您到底了</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="index-elevator-box">
        <a href="" class="elevator-item active" data-index="0">
          <div>热门活动</div>
        </a>
        <a href="" class="elevator-item" data-index="2">
          <div>家庭安防</div>
        </a>
        <a href="" class="elevator-item" data-index="4">
          <div>安全路由</div>
        </a>
        <a href="" class="elevator-item" data-index="6">
          <div>行车安全</div>
        </a>
        <a href="" class="elevator-item" data-index="8">
          <div>扫地机器人</div>
        </a>
        <a href="" class="elevator-item" data-index="10">
          <div>智能守护</div>
        </a>
        <a href="" class="elevator-item" data-index="12">
          <div>生态互联</div>
        </a>
        <a href="" class="elevator-item" data-index="14">
          <div>更多商品</div>
        </a>
      </div>
    </div>

    <div class="footer">
      <div class="helper-footer">
        <div class="footer-box clearfix">
          <div class="helper-box about-box">
            <p class="helper-title">关于商城</p>
            <p class="helper-text">
              360商城是奇虎360公司的官方电商平台，主要经营360安全智能设备，以及相关领域消费品。提供最新的360智能设备，最贴心的售后服务，360社区一手评测资讯，享受360安全、安心、放心的购物体验。
            </p>
            <div class="follow-box">
              <span>关于我们</span>
              <span>
                <a class="iconfont icon-weixin"></a>
                <a class="iconfont icon-xinlangweibo"></a>
              </span>
            </div>
          </div>
          <div class="helper-box link-box">
            <div class="helper-title">售后服务</div>
            <div>
              <a href="">7日无理由退货</a>
              <a href="">质量问题15日内换货 </a>
              <a href="">保修条款</a>
              <a href="">服务流程</a>
              <a href="">许可协议</a>
              <a href="">隐私政策</a>
            </div>
          </div>
          <div class="helper-box link-box">
            <div class="helper-title">帮助中心</div>

            <a href="">用户注册</a>
            <a href="">会员说明</a>
            <a href="">登录与密码找回</a>
            <a href="">购买指南</a>
            <a href="">支付方式</a>
            <a href="">配送与说明</a>
          </div>
          <div class="helper-box contact-box">
            <div class="helper-title">联系我们</div>
            <p class="phone">400-6822-360</p>
            <p class="time">周一至周日 9:00-18:00（仅收市话费）</p>
          </div>
        </div>
      </div>
      <div class="copyright-floor">
        <div class="footer-box">
          <div class="service-policy-list">
            <a href="">
              <i class="iconfont icon-caigoutuihuodan"></i>
              7天无理由退货
            </a>
            <a href="">
              <i class="iconfont icon-huanhuodan"></i>
              15天免费换货
            </a>
            <a href="">
              <i class="iconfont icon-baoyou"></i>
              满99元包邮
            </a>
          </div>
          <div class="copyright-line">
            <p>©2019-2021 mall.360.cn版权所有</p>

            <p>京ICP备08010314号-6 营业执照</p>
            <p>
              公司名称：北京视觉世界科技有限公司 |
              社会统一信用代码：91110105336460203N | 食品经营许可证
            </p>
            <p>
              公司地址：北京市朝阳区酒仙桥路6号院2号楼1至17层102号内5层501 |
              联系方式：400-6822-360
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="right-side">
      <div class="right-middle-box">
        <a href="" style="display: none">
          <i class="iconfont icon-youhuiquan"></i>
          <div class="right-active-box"></div>
        </a>
        <a href="">
          <i class="iconfont icon-xiaoxi"></i>
          <div class="right-hover-box">
            <span class="item-text">意见反馈</span>
          </div>
        </a>
        <a href="">
          <i class="iconfont icon-wechat"></i>
          <div class="right-hover-box wx">
            <div class="wx-img">
              <img src="../images/wx.png" alt="" />
            </div>
            <span class="item-text">关注公众号</span>
          </div>
        </a>
        <a href="">
          <i class="iconfont icon-kefu"></i>
          <div class="right-hover-box">
            <span class="item-text">在线客服</span>
          </div>
        </a>
      </div>
      <div class="right-bottom-box">
        <a href="">
          <i class="iconfont icon-ziyuanxhdpi"></i>
          <!-- <div class="right-hover-box">
            <span class="item-text"></span>
          </div> -->
        </a>
        <a href="" class="backtop">
          <i class="iconfont icon-fanhuidingbu"></i>
          <div class="right-hover-box">
            <span class="item-text">返回顶部</span>
          </div>
        </a>
      </div>
    </div>
    <!-- <div class="quc-mask"></div>
    <div class="quc-panel">
      <div class="quc-panel-hd">
        <div class="quc-panel-title">
          <div>
            <div class="quc-panel-list">
              <div class="active">短信登录</div>
              <span>丨</span>
              <div>360账号登录</div>
            </div>
          </div>
        </div>
        <a href="" class="quc-panel-close">
          <i class="iconfont icon-close"></i>
        </a>
      </div>
      <div class="quc-panel-bd">
        <div class="quc-main">
          <div>
            <form action="" method="post" class="quc-form">
              手机登录
              <div class="quc-form-item">
                <div class="quc-input">
                  <input type="text" placeholder="手机号" />
                </div>
                <div class="quc-input-err">请输入手机号</div>
              </div>
              <div class="quc-form-item">
                <div class="quc-input">
                  <input type="text" placeholder="短信验证码" />
                  <div class="quc-input-append">
                    <span>获取验证码</span>
                  </div>
                </div>
              </div>
              账号登录
              <div class="quc-form-item">
                <div class="quc-input">
                  <input type="text" placeholder="手机号/用户名/邮箱" />
                </div>
              </div>
              <div class="quc-form-item">
                <div class="quc-input">
                  <input type="text" placeholder="密码" />
                </div>
              </div>

              <div class="quc-button-list">
                <input type="button" value="登录" class="quc-button-primary" />
              </div>
              <div class="quc-form-tips">
                <a href="" class="tips tips-left">快速注册</a>
                <a href="" class="tips tips-right">找回密码</a>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script
      src="./javascripts/library/require.js"
      data-main="./javascripts/main.js"
    ></script>
    <script src="./javascripts/users.js"></script>
  </body>
</html>
